<template>
  <div class="winning-list">
    <div class="winning-list-header"></div>
    <div class="winning-list-content">
      <div class="winning-list-content-items" ref="item">
        <ul class="winning-list-content-item" ref="list_1">
          <li class="winning-list-content-list" v-for="(item, index) in lists" :key="index">
            <div class="winning-list-content-list-image">
              <img :src="item.avatar" class="winning-list-content-list-images">
            </div>
            <div class="winning-list-content-list-information">
              <p class="winning-list-content-list-text">
                恭喜
                <strong class="winning-list-content-list-text-name">‘{{item.name}}’</strong>
                成功集齐所有字
              </p>
            </div>
          </li>
        </ul>
        <ul class="winning-list-content-item winning-list-content-item-two" ref="list_2">
          <li class="winning-list-content-list" v-for="(item, index) in lists" :key="index">
            <div class="winning-list-content-list-image">
              <img :src="item.avatar" class="winning-list-content-list-images">
            </div>
            <div class="winning-list-content-list-information">
              <p class="winning-list-content-list-text">
                恭喜
                <strong class="winning-list-content-list-text-name">‘{{item.name}}’</strong>
                成功集齐所有字
              </p>
            </div>
          </li>
        </ul>
        
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Prize',
  props: ['list'],
  data () {
    return {
      lists: {},
      scrollInterval: '',
      listsLength: ''
    }
  },
  mounted () {
    this.lists = this.list
    this.scroll()
  },
  // watch: {  父组件网络请求的值传给子组件，但子组件生成时，父组件的值还有传过来，所以子组件的生命周期函数无法获取传递的值，可以通过watch监听器来实现获取传递的值，另一种方法是父组件通过传递的值使用v-if来决定子组件的生成，传递值OK时，子组件才生成，所以子组件的生命周期函数可以获取传递的值
  //   list () {
  //     this.lists = this.list
  //   }
  // },
  methods: {
    scroll () { //获奖名单滚动
      this.$nextTick( () => {
        this.listsLength = Object.keys(this.lists) //获取对象的长度
        if ( this.listsLength.length > 4 ) { //大于4开始滚动名单
          this.scrollInterval = setInterval( () => {
          if ( this.$refs.item.scrollTop >= this.$refs.list_1.offsetHeight ) {
            this.$refs.item.scrollTop = 0
          } else {
            this.$refs.item.scrollTop++
          }
        }, 20)
        }
      }) 
    }
  },
  beforeDestroy () {
    clearInterval( this.scrollInterval )
  }
}
</script>

<style lang="stylus" scoped>
 .winning-list-header
    width 463px
    height 77px
    background url("../assets/img/prize-header-background.png") no-repeat
    background-size cover
    margin 0 auto
  .winning-list-content
    width 623px
    height 350px
    background url("../assets/img/rectangle.png") no-repeat
    background-size cover
    margin 32px auto 0
    display flex
    justify-content center
    align-items center
    .winning-list-content-items
      width 90%
      height 90%
      overflow  hidden
      position relative
      z-index 0
      .winning-list-content-item
        display flex
        flex-direction column
        justify-content space-between
        .winning-list-content-list
          display flex
          flex-wrap wrap
          margin-top 25px
          overflow hidden
          .winning-list-content-list-image
            width 80px
            height 80px
            .winning-list-content-list-images
              width 100%
              height auto
              border-radius 50%
          .winning-list-content-list-information
            flex 1
            display flex
            flex-wrap wrap
            align-items center
            padding-left 20px
            .winning-list-content-list-text
              font-size 30px
              .winning-list-content-list-text-name
                color #2f1302
                font-weight 500
</style>
